<!-- 头部横向菜单 -- 郭萍 -- 2017年5月 -->
<template>
  <div>
    <ul v-if="menuList.length > 0"  :id="renderId" >
      <li v-if="isFolder(menu)" v-for="(menu, index) in menuList" key="index" :id="menu.menuLevel === 1?'select'+menu.id:''">
        <a :class="{hide:menu.childNode && menu.childNode.length > 0, currentcss: menuId===menu.id}" >{{menu.menuName}}</a>
        <horizontalMenu :menuList="menu.childNode" :allMenuList="allMenuList"></horizontalMenu>
      </li>
      <li v-else="" @click.stop="gotoPath(menu, index)">
        <router-link :to="menu.menuUrl!=='/'?menu.menuUrl:''">
          {{menu.menuName}}
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
  import {gotBreads} from '../../smartlight/common/js/util.js'
  import $ from 'jquery'
  // var flag = true
  export default {
    name: 'horizontalMenu',
    props: {
      menuList: {
        type: Array,
        default () {
          return []
        }
      },
      allMenuList: {
        type: Array,
        default () {
          return []
        }
      },
      level: {
        type: Number,
        default: 0
      }
    },
    data () {
      return {
        menuIndex: 0,
        menuId: 0,
        breadArr: [],
        topMenuIds: [], // 一级菜单id集合
        selMenuId: 0 // 选中菜单所属一级菜单id
      }
    },
    computed: {
      renderId () {
        return this.level < 0 ? '' : 'width2'
      }
    },
    methods: {
      isFolder (model) {
        var flag = true
        if (!model.childNode) {
          flag = false
        } else {
          if (!model.childNode.length > 0) {
            flag = false
          }
        }
        return flag
      },
      gotoPath (menu, index) {
        // 更新selMenuId值
        this.selMenuId = this.getTopMenuId(menu.id, this.allMenuList)
        // 更新一级菜单选中状态
        for (let id of this.topMenuIds) {
          $('#select' + id).removeClass('selMenu')
        }
        $('#select' + this.selMenuId).addClass('selMenu')
        // 面包屑
        if (menu.menuUrl !== '/') {
          var breadArr = gotBreads(menu, this.allMenuList)
          this.$store.dispatch('updateBreads', breadArr)
          this.$store.dispatch('updatelocationpath', menu.menuUrl)
          this.$store.dispatch('showActive', {url: menu.menuUrl})
          // 将面包屑和url保存至sessionStorage
          sessionStorage.setItem('breads', breadArr)
          sessionStorage.setItem('menuUrl', menu.menuUrl)
        }
      },
      // 获取menu的一级菜单id
      getTopMenuId (id, allMenuList) {
        var menuId = 0
        for (let i = 0; i < allMenuList.length; i++) {
          if (allMenuList[i].childNode) { // 是否存在二级
            for (let j = 0; j < allMenuList[i].childNode.length; j++) {
              if (allMenuList[i].childNode[j].childNode) { // 是否存在三级
                for (let k = 0; k < allMenuList[i].childNode[j].childNode.length; k++) {
                  if (allMenuList[i].childNode[j].childNode[k].id === id) {
                    menuId = allMenuList[i].id
                    break
                  }
                }
              } else {
                if (allMenuList[i].childNode[j].id === id) {
                  menuId = allMenuList[i].id
                  break
                }
              }
            }
          } else {
            if (allMenuList[i].id === id) {
              menuId = allMenuList[i].id
              break
            }
          }
        }
        return menuId
      }
    },
    mounted () {
      // 获取一级菜单id集合
      let menulist = this.allMenuList
      for (let menu of menulist) {
        this.topMenuIds.push(menu.id)
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .menu
    font-family: arial, sans-serif;
    width:750px;
    position:relative;
    margin:0;
    font-size:13px;
    #width2
      border: 1px solid rgba(0, 0, 0, 0.15);
      border-radius: 4px;
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15)
      width:200px;
      z-index:1000000;
      li a:hover
        color:#20A0FF;
      li a
        width:200px;
        line-height:40px;
        height:40px;
        border-bottom:1px solid #e0e0e0;
        background-color:#fff;
        color:#323232;
    ul
      padding:0;
      margin:0;
      list-style-type: none;
      li
        float:left;
        position:relative;
        color: #D2ECFF;
      a, a:visited
        display:block;
        text-decoration:none;
        /*color:#000;*/
        width:104px;
        height:56px;
        text-align:center;
        background:#20A0FF;
        line-height:56px;
        font-size:13px;
        overflow:hidden;
        cursor:pointer;
        font-family:"微软雅黑"
      li:hover
        a
          color:#fff;
          font-weight:bold;
          border-bottom:4px solid #94D2FF;
          font-family:"微软雅黑"
        ul
          display:block;
          position:absolute;
          top:60px;
          left:0;
          width:105px;
          li:hover
            ul
              display:block;
              position:absolute;
              left:200px;
              top:0;
          li
            a
              display:block;
              background:#6cc0ff;
              color:#fff;
              font-weight:normal
            a.hide
              background:#6cc0ff;
              color:#fff;
              font-weight:normal
            a:hover
              background:#52b5ff;
              color:#fff;
            ul
              display: none;
      ul
        display: none;
    .currentcss
      color:#fff;
      font-weight:bold;
      background:#6cc0ff;
      border-bottom:4px solid #94D2FF
  .activeli
    border-bottom: 4px solid #99D2FC !important;
    color: #fff !important;
    font-weight: bold;
  // .selMenu
  .selMenu
    a
      color:#fff;
      font-weight:bold;
      border-bottom:4px solid #94D2FF;
</style>
